<template>
  <div style="padding-bottom: 50px">
    <van-nav-bar
        title="商品详情"
        left-arrow
        @click-left="onClickLeft"
    />
    <van-tabs v-model="activeName" border>
      <van-tab title="基本信息" name="a">
        <div v-if="LodingFlag" size="30" style="height: 50vh;margin-top:100px;text-align: center">
          <van-loading color="#1989fa" />
          <van-skeleton title :row="10" />
        </div>
        <div v-else>
          <div class="info" @click="bigImg">
            <img :src="baseInfo.coverImgUrl" alt="">
          </div>
          <div class="infoNameP">
            <div>
              <p class="van-ellipsis" style="width: 60%">{{baseInfo.name}}</p>
              <p style="color:indianred;">💰{{baseInfo.price}}元</p>
            </div>

            <p>{{baseInfo.intro}}</p>
          </div>
          <div class="infoIntro">
            <div class="computedPrice">
              <p>当前价格为：￥{{this.value * this.baseInfo.price}}</p>
              <van-stepper v-model="value" theme="round" button-size="22" disable-input />
            </div>
          </div>
          <van-divider dashed style="margin-top: 20px; font-size: 18px;font-weight: bold;color: #000">图文详情</van-divider>
          <div class='goodsDetail'>
            <p>{{baseInfo.intro}}</p>
            <div v-html="baseInfo.content"></div>
          </div>
        </div>

      </van-tab>
      <van-tab title="图文详情" name="b">
        <div v-if="LodingFlag" size="30" style="height: 50vh;margin-top:100px;text-align: center">
          <van-loading color="#1989fa" />
        </div>
        <div v-else>
          <div class='goodsDetail'>
            <p>{{baseInfo.intro}}</p>
            <div v-html="baseInfo.content"></div>
          </div>
        </div>
      </van-tab>
    </van-tabs>
    <van-goods-action>


      <van-goods-action-icon icon="share-o" text="分享" color="#ee0a24" @click="showShare = true"/>

      <van-badge :content="content" max="99">
        <van-goods-action-icon icon="cart-o" text="购物车"  to="/index/shopcar"/>
      </van-badge>
      <van-goods-action-button type="warning" text="加入购物车" @click="show=true"/>
<!--      <van-goods-action-button type="warning" text="加入购物车" @click="addShopCar"/>-->
      <van-goods-action-button v-if="showLoadingFlag" type="danger" text="立即购买" @click.once="addShopCar"/>
      <van-goods-action-button v-else loading type="danger"/>
    </van-goods-action>
    <ToTop></ToTop>
<!--    分享-->
    <van-share-sheet
        v-model="showShare"
        title="立即分享给好友"
        :options="options"
        safe-area-inset-bottom
        @select="onSelect"
    />

    <van-action-sheet v-model="show" @select="onSelectGoods" style="padding: 30px 25px;font-size: 16px;box-sizing: border-box">
<!--      <h2 style="color: red">商品详情</h2>-->
      <h3>商品详情</h3>
      <div class="toBuy">
        <div class="Img">
          <img :src="baseInfo.coverImgUrl" alt="" @click="bigImg">
          <div>
            <p>{{baseInfo.name}}</p>
            <div>
              <p>💰 ￥{{baseInfo.price}}</p>
              <van-stepper v-model="value" theme="round" button-size="22" disable-input />
            </div>
          </div>
        </div>
        <p>{{baseInfo.intro}}</p>

      </div>
      <van-goods-action  style="z-index: 3000;position: relative">
        <van-goods-action-button type="warning" text="加入购物车" @click="toShopCar" />
        <van-goods-action-button v-if="showLoadingFlag" type="danger" text="立即购买" @click.once="addShopCar"/>
        <van-goods-action-button v-else loading type="danger"/>
      </van-goods-action>
    </van-action-sheet>

  </div>
</template>

<script>
import { Notify } from 'vant';
import {changeShopCarNum, getGoodsMsg, getShopCarList, shopCarAdd} from "@/api/api";
import { ImagePreview } from 'vant';
import ToTop from "@/components/ToTop";
// import { Badge } from 'vant';
import { Toast } from 'vant';

export default {
name: "GDHead",
  components:{
    ToTop,
    [ImagePreview.Component.name]: ImagePreview.Component,
  },
  data() {
    return {
      showLoadingFlag:true,
      show: false,
      // actions: [{ name: '选项一' }, { name: '选项二' }, { name: '选项三' }],

      //分享
      showShare: false,
      options: [
        [
          { name: '微信', icon: 'wechat' },
          { name: '朋友圈', icon: 'wechat-moments' },
          { name: '微博', icon: 'weibo' },
          { name: 'QQ', icon: 'qq' ,src:'https://wpa.qq.com/msgrd?v=3&uin=2488331320&site=qq&menu=yes&jumpflag=1'},
        ],
        [
          { name: '复制链接', icon: 'link' },
          { name: '分享海报', icon: 'poster' },
          { name: '二维码', icon: 'qrcode' },
          { name: '小程序码', icon: 'weapp-qrcode' },
        ],
      ],
      //商品loading
      LodingFlag:true,
      activeName: 'a',
      baseInfo:{},
      value: 1,
      //购物车的数量
      content:0,
    //  购物车列表
      shopCarList:[],
    };
  },
  methods:{
    onSelectGoods(item) {
      this.show = false;
      Toast(item.name);
    },

    onSelect(option) {
      Toast(option.name);
      this.showShare = false;
    },
    bigImg(){
      ImagePreview({
        images:[
            this.baseInfo.coverImgUrl,
        ],
      closeable: true
     }
    // 测试更新
    );
    },
    onClickLeft(){
      this.$router.go(-1)
    },
    //点击加入购物车并跳转
    addShopCar(){
      this.showLoadingFlag = false
      this.show = false
      document.documentElement.scrollTop = 0;
      shopCarAdd(this.$route.query.goodsId,this.value).then(res=>{
        if(res.data.code == 0){
          this.content++
          Toast('已经加入购物车啦')
          this.showLoadingFlag = true
          this.$router.push({path:'/index/shopcar'})
          // this.$router.go(0)
          getShopCarList().then(res=>{
            this.shopCarList = res.data.list
            this.content = this.shopCarList.length
          })
        }else if(res.data.code == 500){
          let i
          this.shopCarList.forEach((value,index)=>{
            if (value.goodsId==this.$route.query.goodsId){
              i = index
            }
          })
          if (i!=undefined){
            changeShopCarNum(this.shopCarList[i].shoppingCartId,this.value).then(res=>{
              Toast(res.data.msg);
              this.$router.push({path:'/index/shopcar'})
            })
          }
        }else{
          this.$router.push({path:'/accountsign'})
          Toast(res.data.msg);
        }
      })
    },
    //点击加入购物车
    toShopCar(){
      // this.showLoadingFlag = false
      this.show = false
      document.documentElement.scrollTop = 0;
      shopCarAdd(this.$route.query.goodsId,this.value).then(res=>{
        if(res.data.code == 0){
          this.content++
          Toast('已经加入购物车啦')
          // this.showLoadingFlag = true
          // this.$router.push({path:'index/shopcar'})
          // this.$router.go(0)
          getShopCarList().then(res=>{
            this.shopCarList = res.data.list
            this.content = this.shopCarList.length
          })
        }else if(res.data.code == 500){
          let i
          this.shopCarList.forEach((value,index)=>{
            if (value.goodsId==this.$route.query.goodsId){
              i = index
            }
          })
          if (i!=undefined){
            changeShopCarNum(this.shopCarList[i].shoppingCartId,this.value).then(res=>{
              Toast(res.data.msg);
              // this.$router.push({path:'index/shopcar'})
            })
          }
        }else{
          this.$router.push({path:'/accountsign'})
          Toast(res.data.msg);
        }
      })
    }
  },
  created() {
    getGoodsMsg(this.$route.query.goodsId).then(res=>{
      if(res.data.code==0){
        console.log(res)
        this.baseInfo = res.data.data
        this.LodingFlag=false
      }else{
        Notify({ type: 'danger', message: '商品信息请求错误，请联系管理员！'});
      }
    })
  //  获取购物车列表
    getShopCarList().then(res=>{
      this.shopCarList = res.data.list
      this.content = this.shopCarList.length
      console.log(res)
    })

  },
}
</script>

<style scoped lang="less">
.toBuy{
  //padding: 25px 10px;
  box-sizing: border-box;
  >.Img{
    display: flex;
    justify-content: space-between;
    border-bottom: 2px dashed #ddd;
    padding-bottom: 15px;
    >img{
      width: 100px;
      height: 100px;
      margin-right: 20px;
    }
    >div{
      flex-grow: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-evenly;
      >p:first-child{
        font-size: 18px;
      }
      >div{
        display: flex;
        justify-content: space-between;
        >p{
          color: #e51c23;
          font-size: 20px;
        }
      }
    }
  }
  >p{
    padding: 10px 0;
    font-weight: bold;
    font-size: 16px;
    letter-spacing: 0.1em;
  }
}
.info{
  width: 100%;
  //height: 50vh;
  >img{
    display: block;
    width: 100%;
    height: auto;
  }
}
/deep/.van-card__title{
  margin: 10px 0;
  font-size: 18px;
}
/deep/.van-card__price{
  width: 50%;
  font-size: 20px;
  color: #e51c23;
}
/deep/.van-badge--fixed{
  right: 13px;
}
.infoNameP{
  margin: 15px;
  padding: 15px 0;
  box-sizing: border-box;
  border: 1px solid #ddd;
  box-shadow: 2px 2px 3px indianred;
  border-radius: 20px;
  >div{
    display: flex;
    justify-content: space-around;
    font-size: 20px;
    font-weight: bold;
    padding-bottom: 5px;
    border-bottom: 2px dashed #ddd;
  }
  >p{
    padding: 10px;
    font-weight: bold;
    font-size: 16px;
    letter-spacing: 0.1em;
  }
}

.infoIntro{
  padding: 10px 15px;
  >.computedPrice{
    display: flex;
    justify-content: space-between;
    padding: 10px;
    border: 1px solid #ddd;
    box-shadow: 2px 2px 3px indianred;
    border-radius: 20px;
    background-color: #f5f5f5;
    //margin: 15px 0;
  }
}
/deep/.goodsDetail{
  >p{
    padding: 10px 20px;
    width: 100%;
    font-size: 14px;
    color: #828282;
    box-sizing: border-box;
  }
  div{
    width: 100% !important;
    height: auto !important;
  }
      img{
        width: 100% !important;
        height: auto;
        margin: 0;
        display: inline-block !important;
      }
}

</style>